<template>
  <div class="wisdom_tree">
    <navigate @answerBack="answerBack">心灵智慧树</navigate>

    <div class="container_main">
      <div class="record_box">
        <img
          :src="INFO.avatar"
          alt=""
          class="record_img"
          @click="jumpPage('anonymityInfo')"
        />
        <div class="record_right">
          <div class="right_info">
            <div class="user_name">{{ INFO.name }}</div>
            <div class="set">点击头像设置匿名信息</div>
          </div>
          <div class="history" @click="jumpPage('/sendReceiveRecord')">
            <span>历史收发记录</span>
            <img src="@/assets/images/common/right.png" alt="" />
          </div>
        </div>
      </div>

      <div class="screen">
        <div class="white_dot dot_1"></div>
        <div class="white_dot dot_2"></div>
        <div class="white_dot dot_3"></div>
        <div class="white_dot dot_4"></div>
        <div class="white_dot dot_5"></div>
        <div class="white_dot dot_6"></div>
        <div class="white_dot dot_7"></div>
        <div class="white_dot dot_8"></div>
        <div class="white_dot dot_9"></div>
      </div>
    </div>

    <div class="btn_box" @click="clickOperation(1)">
      <img src="@/assets/images/home/capture_icon.png" alt="" />
      <span>随机收取</span>
    </div>
    <div class="btn_box" @click="clickOperation(2)">
      <img src="@/assets/images/home/deliver_icon.png" alt="" />
      <span>我要投递</span>
    </div>

    <!-- 收取弹框 -->
    <collectPop
      v-if="isShowCollectPop"
      :collectInfo="collectInfo"
      @toColsePop="toColsePop"
    />

    <!-- 投递 -->
    <deliverPop v-if="isShowdeliverPop" @toColsePop="toColsePop" />

    <!-- 录音弹框 -->
    <recordingPop v-if="isShoRecordingPop" />
  </div>
</template>

<script>
import { mapState } from "vuex";
import collectPop from "./components/collectPop.vue";
import deliverPop from "./components/deliverPop.vue";
import recordingPop from "./components/recordingPop.vue";

import { randomGrab } from "@/api/funcation/wisdomTree";
export default {
  data() {
    return {
      collectInfo: {}, //随机收取信息
      isShowCollectPop: false,
      isShowdeliverPop: false,
      isShoRecordingPop: false,
    };
  },
  components: { collectPop, deliverPop, recordingPop },
  computed: {
    ...mapState(["INFO"]),
  },
  created() {},
  methods: {
    toColsePop(val) {
      val == 1
        ? (this.isShowCollectPop = false)
        : (this.isShowdeliverPop = false);
    },
    jumpPage(path) {
      this.$router.push(path);
    },
    async clickOperation(val) {
      if (val == 1) {
        this.isShowCollectPop = true;
        let res = await randomGrab();
        this.collectInfo = res.data;
      } else {
        this.isShowdeliverPop = true;
      }
    },
    answerBack() {
      this.$router.push({ path: "/nav/functionCenter" });
    },
  },
};
</script>

<style lang="less" scoped>
@keyframes flicker1_6 {
  0% {
    opacity: 0;
  }

  16% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes flicker9 {
  0% {
    opacity: 0;
  }

  14% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes flicker6 {
  0% {
    opacity: 0;
  }

  16% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes flicker4 {
  0% {
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes flicker3 {
  0% {
    opacity: 0;
  }

  22% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes flicker8 {
  0% {
    opacity: 0;
  }

  18% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes flicker7 {
  0% {
    opacity: 0;
  }

  14% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes flicker5 {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes flicker2 {
  0% {
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes collect_release_animation {
  0% {
    left: 65px;
    top: 29px;
    width: 96px;
    height: 96px;
  }

  6% {
    left: 56px;
    top: 27px;
    width: 80px;
    height: 80px;
  }

  12% {
    left: 48px;
    top: 24px;
    width: 76px;
    height: 76px;
  }

  18% {
    top: 20px;
    left: 41px;
    width: 70px;
    height: 70px;
  }

  24% {
    top: 16px;
    left: 35px;
    width: 65px;
    height: 65px;
  }

  30% {
    top: 105px;
    left: 330px;
    width: 60px;
    height: 60px;
  }

  36% {
    top: 48px;
    left: 351px;
    width: 55px;
    height: 55px;
  }

  42% {
    top: 30px;
    left: 408px;
    width: 50px;
    height: 50px;
  }

  48% {
    top: 35px;
    left: 471px;
    width: 45px;
    height: 45px;
  }

  54% {
    top: 45px;
    left: 528px;
    width: 40px;
    height: 40px;
  }

  60% {
    top: 68px;
    left: 578px;
    width: 35px;
    height: 35px;
  }

  66% {
    top: 88px;
    left: 622px;
    width: 30px;
    height: 30px;
  }

  72% {
    top: 113px;
    left: 662px;
    width: 25px;
    height: 25px;
  }

  78% {
    top: 133px;
    left: 699px;
    width: 20px;
    height: 20px;
  }

  84% {
    top: 155px;
    left: 730px;
    width: 14px;
    height: 14px;
  }

  100% {
    top: 175px;
    left: 757px;
    width: 10px;
    height: 10px;
  }
}

.header {
  background-color: #020519;
}

::v-deep .header .title {
  color: #fff;
}

::v-deep .header .right .vertical_center {
  color: #fff;
}

.wisdom_tree {
  width: 100vw;
  height: 100vh;
  background: #020519;
}

.record_box {
  display: flex;
  align-items: center;
  width: 333.33px;
  height: 66.67px;
  // opacity: 0.2;
  padding: 13px;
  margin: 0 auto;
  background: #00558e;
  border-radius: 6.67px;
}

.record_img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 6.67px;
}

.record_right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  color: #ffffff;
}

.right_info {
}

.right_info .user_name {
  font-size: 14.67px;
  line-height: 14.67px;
}

.right_info .set {
  margin-top: 8.33px;
  opacity: 0.5;
  font-size: 10px;
}

.history {
  display: flex;
  align-items: center;
  opacity: 0.3;
  font-size: 12px;
}

.history img {
  width: 7.33px;
  height: 13.33px;
  margin-left: 7.67px;
}

.btn_box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 333.33px;
  height: 47.67px;
  line-height: 47.67px;
  margin: 24px auto 0 auto;
  color: #ffffff;
  font-size: 15.33px;
  text-align: center;
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #00aeff;
  border-radius: 6.67px;
  margin-bottom: 12.25px;
}

.btn_box:last-child {
  margin-bottom: 0;
}

.btn_box img {
  width: 20px;
  height: 20px;
  margin-right: 11px;
}

.container_main {
  background-image: url("@/assets/images/home/tree_img.png");
  background-size: cover;
  /* 保持图片的宽高比，裁剪以完全覆盖容器 */
  background-position: center;
  /* 图片居中显示 */
  background-repeat: no-repeat;
  /* 不重复图片 */
  width: 100%;
  height: 500px;
  // padding: 15px 20px;
  box-sizing: border-box;
  // text-align: center;

  // height: 712px;
  .screen {
    // position: relative;
    // width: 100%;
    // height: 627px;
    border-radius: 10px;

    //   background-color: #000;
    .white_dot {
      position: absolute;
      border-radius: 50%;
      background: #ffffff;
      box-shadow: 0px 0px 20px 00px deepskyblue;
    }

    .collect_release {
      width: 96px;
      height: 96px;
      position: absolute;
      transform: scale(0.625);
      display: none;
    }

    .collect_release.animation_collect_release {
      display: block;
      animation: collect_release_animation 0.5s linear infinite reverse;
    }

    .collect_release.animation_collect_release_reverse {
      display: block;
      animation: collect_release_animation 0.5s linear infinite;
    }

    .dot_1 {
      top: 297px;
      left: 44px;
      animation-name: flicker1_6;
      animation-duration: 1200ms;
      animation-iteration-count: infinite;
    }

    .dot_2 {
      top: 214px;
      left: 82px;
      animation-name: flicker2;
      animation-duration: 1600ms;
      animation-iteration-count: infinite;
    }

    .dot_3 {
      top: 170px;
      left: 139px;
      animation-name: flicker3;
      animation-duration: 900ms;
      animation-iteration-count: infinite;
    }

    .dot_4 {
      top: 216px;
      left: 260px;
      animation-name: flicker4;
      animation-duration: 1300ms;
      animation-iteration-count: infinite;
    }

    .dot_5 {
      top: 276px;
      left: 295px;

      animation-name: flicker5;
      animation-duration: 750ms;
      animation-iteration-count: infinite;
    }

    .dot_6 {
      top: 286px;
      left: 125px;
      animation-name: flicker1_6;
      animation-duration: 1200ms;
      animation-iteration-count: infinite;
    }

    .dot_7 {
      top: 224px;
      left: 137px;

      animation-name: flicker7;
      animation-duration: 1360ms;
      animation-iteration-count: infinite;
    }

    .dot_8 {
      top: 245px;
      left: 180px;

      animation-name: flicker8;
      animation-duration: 1080ms;
      animation-iteration-count: infinite;
    }

    .dot_9 {
      top: 298px;
      left: 226px;

      animation-name: flicker9;
      animation-duration: 1400ms;
      animation-iteration-count: infinite;
    }

    .dot_1,
    .dot_3 {
      width: 14px;
      height: 14px;
    }

    .dot_2,
    .dot_8 {
      width: 10px;
      height: 10px;
    }

    .dot_7,
    .dot_6 {
      width: 16px;
      height: 16px;
    }

    .dot_9 {
      width: 13px;
      height: 13px;
    }

    .dot_4 {
      width: 12px;
      height: 12px;
    }

    .dot_5 {
      width: 18px;
      height: 18px;
    }
  }

  button {
    margin: 15px auto 0;
  }
}
</style>
